<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>登录页面</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/login.css" />
    <link rel="stylesheet" href="iconfont/iconfont.css" />
    <script type="text/javascript" src="js/mui.js"></script>
    <script src="js/pxtorem.js"></script>
    <script src="js/mui.js"></script>
</head>
<body>
    <!--header开始-->
      <header>
      	<div class="iconfont icon-fanhui mui-action-back" style="font-size:0.34rem"></div>
      	<div style="font-size:0.34rem;color:#fff;">登录</div>
      </header>
    <!--header结束-->
	<!--验证开始-->
	    <form action="" class="form" method="post">
	    	<input type="text"  name="userphone" placeholder="请输入手机号码" autofocus="autofocus"/>
	    	<input type="password"  name="userpass" placeholder="请输入密码"/>
	    	<div class="submit">确定</div>
	    </form>
	<!--验证结束-->
	<!--注册和忘记密码开始-->
	<div class="regpassBox">
		<span>注册账号</span>
		<span>忘记密码</span>
	</div>
	<!--注册和忘记密码结束-->
	<!--其他方式登录开始-->
	<footer>
		<div class="ftitle">其他方式登录</div>
		<div class="otherlogin">
			<a href="">
				<img src="img/icon_sina@2x.png" alt="" />
				<span>微博登录</span>
			</a>
			<a href="">
				<img src="img/icon_qq@2x.png" alt="" />
				<span>QQ登录</span>
			</a>
			<a href="">
				<img src="img/icon_wechat@2x.png" alt="" />
				<span>微信登录</span>
			</a>
		</div>
	</footer>
	<!--其他方式登录结束-->
</body>
<script src="js/apptool.js"></script>
<script src="js/httptool.js"></script>
<script src="js/loginCenter.js"></script>
<script>
	mui.init();
	mui.plusReady(function(){
		    //重写返回键
        webtool.newback();
		//跳转到注册页面
		mui('.regpassBox>span:first-child')[0].addEventListener('tap',function(e){
			webtool.openPreView('register',function(wb){
				wb.show('slide-in-right',300);
			})
		})
		//跳转到忘记密码
		mui('.regpassBox>span:nth-child(2)')[0].addEventListener('tap',function(e){
			webtool.openPreView('findpass',function(wb){
				wb.show('slide-in-right',300);
			})
		})
		//底部显示的BUG
		var oldClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
		window.addEventListener('resize', function() {
			var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
			if(oldClientHeight > nowClientHeight) {
				//键盘弹出的事件处理
				mui('footer')[0].style.display = "none";
			} else {
				//键盘收起的事件处理
				mui('footer')[0].style.display = "block";
			}
	    })
		
		    var  loginData = {
    	loginphone:mui('input[name=userphone]')[0],
    	loginpass:mui('input[name=userpass]')[0],
    }
    mui('.submit')[0].addEventListener('tap',function(){
    	if(!loginData.loginphone.value){
    		mui.toast('手机号不能为空');
    	}else if(!loginData.loginpass.value){
    		mui.toast('密码不能为空');
    	}else if(!apptools.checkMobile(loginData.loginphone.value)){
    		mui.toast('请输入正确的手机号码');
    	}else if(!apptools.checkpass(loginData.loginpass.value)){
    		return;
    	}else{
	    	mui.ajax('http://moyu.youledi.cn/moyu/Api/Login/login',{
	    		data:{
	    			mobile:loginData.loginphone.value,
	    			password:loginData.loginpass.value,
	    		},
	    		dataType:'json',
	    	    type:'post',
	    	    headers:{'Content-Type':'application/json'},
	    	    success:function(data){
	    	    	data=JSON.stringify(data);
	    	    	if(data.code==200){
	    	    		var userInfo = { 
	    	    		    mobile:data.mobile,
	    	    		    password:data.mobile,
	    	    		};
	    	    		localStorage.setItems('userInfo',userInfo);
	    	    		plus.webview.currentWebview().close();
	    	    	}else{
	    	    		mui.toast(data.message);
	    	    		
	    	    	}
	    	    },
		    	error:function(xhr,type,errorThrown){
					//异常处理；
					console.log(xhr)
				}
	    	})
	    	
    	}

    })
 	})

</script>
</html>